<template>
  <div class="page">
    <div>
      <p class="bg"></p>
      <div class="basedataFriends_list">
        <div @click="tabHeaderSrc">
          <div>头像设置</div>
          <div>
            <img
              :src="headerImgsrc?headerImgsrc:'http://www.zhaoshengku.net/wx-%E6%A4%AD%E5%9C%86%201.png'"
              alt
              mode="aspectFill"
            />
          </div>
        </div>
        <div @click="showToast(1)">
          <div>用户名</div>
          <div>{{yonghuNameS}}</div>
        </div>
        <div @click="showToast(2)">
          <div>个性签名</div>
          <div>{{yonghuQianmS}}</div>
          <span></span>
        </div>
        <div>
          <div>地址</div>
        </div>
        <div class="picker_die">
          <div>
            <div>
              <picker :range="shengarr" mode="selector" @change="(e) =>bindPickerChange(e,0)">
                <div class="picker">{{info_province}}</div>
              </picker>
            </div>
            <img src="http://www.zhaoshengku.net/wx-%E5%90%91%E5%B7%A6.png" alt />
          </div>
          <div>
            <div>
              <picker :range="shiarr" mode="selector" @change="(e) =>bindPickerChange(e,1)">
                <div class="picker">{{info_city}}</div>
              </picker>
            </div>
            <img src="http://www.zhaoshengku.net/wx-%E5%90%91%E5%B7%A6.png" alt />
          </div>
          <div>
            <div>
              <picker :range="xianarr" mode="selector" @change="(e) =>bindPickerChange(e,2)">
                <div class="picker">{{info_county}}</div>
              </picker>
            </div>
            <img src="http://www.zhaoshengku.net/wx-%E5%90%91%E5%B7%A6.png" alt />
          </div>
        </div>
        <div class="biaoqian_div" v-if="bianqianis">
          <div>标签</div>
          <ul>
            <li>
              <input
                type="text"
                name
                id
                :value="inputValue"
                @input="yonghuNameinpfour"
                placeholder="请输入您添加的标签"
              />
              <span @click="addValue">添加</span>
            </li>
            <li>
              <span
                v-for="(item,index) in inputValueArrsss"
                :key="index"
                style="background: url('http://www.zhaoshengku.net/wx-yuanjiaot.png') no-repeat; background-size: 166rpx 44rpx;background-position: center center; "
                @click="removeValue(index)"
              >
                {{item}}
                <img src="http://www.zhaoshengku.net/wx-jvxingnink.png" alt />
              </span>
            </li>
          </ul>
        </div>
        <div class="wx">
          <div>微信</div>
          <div>
            <input
              type="text"
              placeholder="请输入您的微信号"
              :value="wxvalue"
              @input="yonghuNameinpstr"
              placeholder-class="placeholder"
            />
          </div>
        </div>
        <div class="qq">
          <div>QQ号</div>
          <div>
            <input
              type="text"
              placeholder="请输入您的QQ号"
              placeholder-class="placeholder"
              :value="qqvalue"
              @input="yonghuNameinptwo"
              maxlength="11"
              @blur="phoneinp"
            />
          </div>
        </div>
      </div>
      <div class="last_true" @click="setinfo">确认修改</div>
    </div>
    <div class="basedataFriends_meng" :style="windowHeights" v-show="basedataFriends_mengtab==1"></div>
    <div class="basedataFriends_qianm" v-show="basedataFriends_qianm==2">
      <div>个性签名</div>
      <div>
        <input
          type="text"
          :value="yonghuQianmS"
          placeholder-class="placeholder"
          maxlength="20"
          @input="yonghuNameinpone"
          placeholder="请输入您的个性签名"
        />
      </div>
      <div>最多可输入20个字符</div>
      <div>
        <span @click="showToastTrue(0)">取消</span>
        <span @click="showToastTrue(1)">确认</span>
      </div>
    </div>
    <div class="basedataFriends_qianm" v-show="basedataFriends_qianm==1">
      <div>用户名</div>
      <div style="margin-top:50rpx">
        <input
          type="text"
          :value="yonghuNameS"
          maxlength="20"
          @input="yonghuNameinp"
          placeholder="请输入您的用户名"
          placeholder-class="placeholder"
        />
      </div>
      <div></div>
      <div>
        <span @click="showToastTrue(2)">取消</span>
        <span @click="showToastTrue(3)">确认</span>
      </div>
    </div>
  </div>
</template>

<script>
import qiniuUploader from "../../../static/qiniuUploader";
export default {
  data() {
    return {
      windowHeights: "",
      yonghuQianm: "",
      yonghuQianmS: "",
      yonghuName: "",
      yonghuNameS: "",
      basedataFriends_mengtab: 0,
      basedataFriends_qianm: 0,
      headerImgsrc: "",
      headerCode: "",
      info_province: "选择省",
      info_city: "选择市",
      info_county: "选择区/县",
      arraySheng: [],
      shengarr: [],
      arrayShi: [],
      shiarr: [],
      arrayXianq: [],
      xianarr: [],
      indexSheng: -1,
      indexShi: -1,
      info_province_id: "",
      info_city_id: "",
      info_county_id: "",
      inputValueArrsss: [],
      inputValue: "",
      qqvalue: "",
      wxvalue: "",
      bianqianis: false,
      qqplaceholder: "",
      wxplaceholder: ""
    };
  },
  methods: {
    // 正则验证QQ号
    phoneinp() {
      if (!/^[1-9]\d{4,10}$/.test(this.qqvalue)) {
        wx.showToast({
          title: "QQ号格式不正确！",
          icon: "none",
          duration: 1000,
          mask: true
        });
      }
    },
    // 选择省市区
    bindPickerChange: function(e, name) {
      if (name == 0) {
        this.indexSheng = e.mp.detail.value;
        this.info_province = this.shengarr[e.mp.detail.value];
        this.info_province_id = this.arraySheng[this.indexSheng].city_id;

        wx.request({
          url: "https://api.zhaoshengku.net/api/data/getareas",
          method: "post",
          data: {
            city_pid: this.info_province_id
          },
          success: res => {
            this.arrayShi = res.data.data;
            var arr = [];
            for (var i = 0; i < this.arrayShi.length; i++) {
              arr.push(this.arrayShi[i].city_name);
            }
            this.shiarr = arr;
            if (this.arrayShi.length > 0) {
              this.disabledShi = 1;
            }
          },
          fail: res => {
            if (res.errMsg) {
              wx.showToast({
                title: "请检查网络连接！",
                icon: "none",
                duration: 1500
              });
            }
          }
        });
      } else if (name == 1) {
        this.indexShi = e.mp.detail.value;
        this.info_city = this.shiarr[e.mp.detail.value];
        // console.log(this.arrayShi)
        this.info_city_id = this.arrayShi[this.indexShi].city_id;
        wx.request({
          url: "https://api.zhaoshengku.net/api/data/getareas",
          method: "post",
          data: {
            city_pid: this.info_city_id
          },
          success: res => {
            // console.log(res)
            this.arrayXianq = res.data.data;
            var arr = [];
            for (var i = 0; i < this.arrayXianq.length; i++) {
              arr.push(this.arrayXianq[i].city_name);
            }
            this.xianarr = arr;
            if (this.arrayXianq.length > 0) {
              this.disabledXian = 1;
            } else {
              this.disabledXian = 0;
            }
          },
          fail: res => {
            console.log(res);
            if (res.errMsg) {
              wx.showToast({
                title: "请检查网络连接！",
                icon: "none",
                duration: 1500
              });
            }
          }
        });
      } else {
        this.info_county = this.xianarr[e.mp.detail.value];
        this.info_county_id = this.arrayXianq[this.indexShi].city_id;
      }
    },
    showToast(e) {
      this.basedataFriends_qianm = e;
      this.basedataFriends_mengtab = 1;
    },
    showToastTrue(e) {
      this.basedataFriends_mengtab = 0;
      this.basedataFriends_qianm = 0;
      if (e == 1) {
        this.yonghuQianmS = this.yonghuQianm;
        this.yonghuQianm = "";
      } else if (e == 3) {
        this.yonghuNameS = this.yonghuName;
        this.yonghuName = "";
      }
    },
    // 七牛方法
    initQiniu() {
      var options = {
        region: "NCN", // 华北区
        uptokenURL: "https://api.zhaoshengku.net/index/uploader/qtoken", //请求后端uptoken的url地址
        domain: "https://www.zhaoshengku.net" //yourBucketId:这个去你域名配置那里要
        //save_key: true
      };
      qiniuUploader.init(options);
    },
    // 上传图片
    tabHeaderSrc(e) {
      wx.showToast({
        title: "",
        icon: "loading",
        duration: 5000,
        mask: true
      });
      this.$options.methods.initQiniu();
      wx.chooseImage({
        count: 1, //一次最多可以选择的图片张数
        sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有
        success: res => {
          var filePath = res.tempFilePaths[0];
          var xiaoimgSrc = res.tempFilePaths[0].substring(7);
          // 交给七牛上传
          wx.showToast({
            title: "",
            icon: "loading",
            duration: 1000,
            mask: true
          });
          qiniuUploader.upload(
            filePath,
            res => {
              this.headerImgsrc = res.data.url;
              //  上传头像
              wx.request({
                url: "https://api.zhaoshengku.net/index/member/setavatar",
                data: {
                  image: this.headerImgsrc
                },
                method: "post",
                header: {
                  Authorization: this.headerCode
                },
                success: res => {
                  if (res.data.code == 200) {
                    wx.hideToast();
                    wx.showToast({
                      title: "上传成功！",
                      icon: "true",
                      duration: 1000,
                      mask: true
                    });
                    wx.request({
                      url: "https://api.zhaoshengku.net/index/member/getinfo",
                      header: {
                        Authorization: this.headerCode
                      },
                      method: "post",
                      success: res => {
                        if (res.data.code == 200) {
                          this.$store.state.myxinxi = res.data.data;
                        }
                      },
                      fail: res => {
                        console.log(res);
                        if (res.errMsg) {
                          wx.showToast({
                            title: "请检查网络连接！",
                            icon: "none",
                            duration: 1500
                          });
                        }
                      }
                    });
                  }
                },
                fail: res => {
                  console.log(res);
                  if (res.errMsg) {
                    wx.showToast({
                      title: "请检查网络连接！",
                      icon: "none",
                      duration: 1500
                    });
                  }
                }
              });
            },
            error => {},
            null, // 可以使用上述参数，或者使用 null 作为参数占位符
            progress => {
              // console.log("上传进度", progress.progress);
              // console.log("已经上传的数据长度", progress.totalBytesSent);
              // console.log(
              //   "预期需要上传的数据总长度",
              //   progress.totalBytesExpectedToSend
              // );
            },
            () => {
              wx.hideLoading();
            }
          );
        },
        fail: function() {},
        complete: function() {
          wx.hideToast();
        }
      });
    },
    // 提交资料
    setinfo() {
      var data = {};
      if (this.info_province_id) {
        data.info_province_id = this.info_province_id;
      }
      if (this.info_city_id) {
        data.info_city_id = this.info_city_id;
      }
      if (this.info_county_id) {
        data.info_county_id = this.info_county_id;
      }
      if (this.yonghuQianmS) {
        if (this.yonghuQianmS != this.$store.state.myxinxi.info_signature) {
          console.log(this.yonghuQianmS, this.$store.state.myxinxi.info_nick);
          data.info_signature = this.yonghuQianmS;
        }
      }
      if (this.yonghuNameS) {
        if (this.yonghuNameS != this.$store.state.myxinxi.info_nick) {
          console.log(
            this.yonghuNameS,
            this.$store.state.myxinxi.info_signature
          );
          data.info_nick = this.yonghuNameS;
        }
      }
      if (this.qqvalue) {
        data.info_qq = this.qqvalue;
      }
      if (this.wxvalue) {
        data.info_wechat = this.wxvalue;
      }
      if (this.bianqianis) {
        if (this.inputValueArrsss.length > 0) {
          data.info_tag = JSON.parse(
            JSON.stringify(this.inputValueArrsss)
          ).join("%2022");
        }
      }
      console.log(data);
      if (this.yanzdatas(data)) {
        wx.showToast({
          title: "请输入需要修改的内容",
          icon: "none",
          duration: 1000,
          mask: true
        });
        return;
      } else {
        wx.request({
          url: "https://api.zhaoshengku.net/index/member/setinfo",
          method: "post",
          data: data,
          header: {
            Authorization: this.headerCode
          },
          success: res => {
            console.log(res);
            if (res.data.code == 200) {
              wx.request({
                url: "https://api.zhaoshengku.net/index/member/getinfo",
                header: {
                  Authorization: this.headerCode
                },
                method: "post",
                success: res => {
                  if (res.data.code == 200) {
                    this.$store.state.myxinxi = res.data.data;
                  }
                }
              });
              wx.showToast({
                title: "资料修改成功！",
                icon: "true",
                duration: 1000,
                mask: true
              });

              setTimeout(() => {
                wx.switchTab({
                  url: "/pages/my/main"
                });
                this.yonghuQianmS = "";
                this.yonghuNameS = "";
                this.qqvalue = "";
                this.wxvalue = "";
                var headerCode = "Bearer " + wx.getStorageSync("koken");
              }, 1000);
            } else {
              if ((res.data.msg = "info_wechat只能是字母和数字")) {
                wx.showToast({
                  title: "微信号只能是字母或数字",
                  icon: "none",
                  duration: 1500,
                  mask: true
                });
              } else {
                wx.showToast({
                  title: res.data.msg,
                  icon: "none",
                  duration: 1500,
                  mask: true
                });
              }
            }
          },
          fail: res => {
            if (res.errMsg) {
              wx.showToast({
                title: "请检查网络连接！",
                icon: "none",
                duration: 1500
              });
            }
          }
        });
      }
    },
    // 添加标签
    addValue() {
      var _this = this;
      if (_this.inputValue == "") {
        wx.showToast({
          title: "标签不能为空",
          icon: "none",
          duration: 1000,
          mask: true
        });
        return;
      }
      console.log("length", _this.inputValueArrsss);
      if (_this.inputValue.length > 5) {
        wx.showToast({
          title: "标签不能找过五个字符",
          icon: "none",
          duration: 1000,
          mask: true
        });
        return;
      }
      if (_this.inputValueArrsss.length < 3) {
        _this.inputValueArrsss.push(_this.inputValue);
        _this.inputValue = "";
      }
      if (_this.inputValueArrsss.length == 3) {
        wx.showToast({
          title: "标签最多不能超过3个",
          icon: "none",
          duration: 1000,
          mask: true
        });
        return;
      }
    },
    // 删除标签
    removeValue(e) {
      this.inputValueArrsss.splice(e, 1);
    },
    yonghuNameinp(e) {
      this.yonghuName = e.mp.detail.value;
    },
    yonghuNameinpone(e) {
      this.yonghuQianm = e.mp.detail.value;
    },
    yonghuNameinptwo(e) {
      this.qqvalue = e.mp.detail.value;
    },
    yonghuNameinpstr(e) {
      this.wxvalue = e.mp.detail.value;
    },
    yonghuNameinpfour(e) {
      this.inputValue = e.mp.detail.value;
    },
    onShows() {
      // 获取省
      wx.request({
        url: "https://api.zhaoshengku.net/api/data/getareas",
        method: "post",
        success: res => {
          this.arraySheng = res.data.data;
          for (var i = 0; i < this.arraySheng.length; i++) {
            this.shengarr.push(this.arraySheng[i].city_name);
          }
          // console.log(arrdie)
        },
        fail: res => {
          console.log(res);
          if (res.errMsg) {
            wx.showToast({
              title: "请检查网络连接！",
              icon: "none",
              duration: 1500
            });
          }
        }
      });
      wx.getSystemInfo({
        success: res => {
          this.windowHeights = "height:" + res.windowHeight * 2 + "rpx";
        }
      });
      if (this.$store.state.myxinxi.info_tag) {
        this.inputValueArrsss = this.$store.state.myxinxi.info_tag;
      }

      // 设置头
      wx.setNavigationBarTitle({
        title: "编辑资料"
      });
      this.yonghuNameS = this.$store.state.myxinxi.info_nick;
      this.yonghuQianmS = this.$store.state.myxinxi.info_signature;
      console.log(this.$store.state.myxinxi);
      // 验证token
      wx.getStorage({
        key: "koken",
        success: res => {
          this.headerCode = "Bearer " + res.data;
        },
        fail: res => {
          wx.showToast({
            title: "未登录！",
            icon: "none",
            duration: 2500
          });
          setTimeout(function() {
            wx.navigateTo({
              url: "/pages/loginRegister/main"
            });
          }, 1000);
        }
      });
      this.headerImgsrc = this.$store.state.myxinxi.info_avatar;
      wx.stopPullDownRefresh();
      if (this.$store.state.myxinxi.info_qq) {
        this.qqvalue = this.$store.state.myxinxi.info_qq;
      } else {
        this.qqvalue = "";
      }
      if (this.$store.state.myxinxi.info_wechat) {
        this.wxvalue = this.$store.state.myxinxi.info_wechat;
      } else {
        this.wxvalue = "";
      }
    },
    // 验证data是否为空
    yanzdatas(e) {
      for (var i in e) {
        return false;
      }
      return true;
    }
  },
  onShow() {
    this.onShows();
  },
  onLoad(option) {
    if (option.inf_type) {
      this.bianqianis = true;
    } else {
      this.bianqianis = false;
    }
  },
  onPullDownRefresh() {
    this.onShows();
  }
};
</script>

<style scoped>
.basedataFriends_qianm {
  z-index: 2222222222;
}
.page {
  position: relative;
}
.bg {
  width: 100%;
  height: 10rpx;
  background: #eeeeee;
}
.basedataFriends_list {
  background: #fff;
  padding: 0 30rpx;
}
.basedataFriends_list > div {
  display: flex;
  justify-content: space-between;
  height: 90rpx;
  align-items: center;
  box-sizing: border-box;
  border-bottom: 1rpx solid #e5e5e5;
  background: url("http://www.zhaoshengku.net/wx-xz.png") no-repeat;
  background-size: 12rpx 22rpx;
  background-position: 676rpx 35rpx;
  padding-right: 30rpx;
}
.basedataFriends_list > div > div:nth-child(1) {
  font-size: 30rpx;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
}
.basedataFriends_list > div:nth-child(1) > div:nth-child(2) {
  height: 63rpx;
}
.basedataFriends_list > div:nth-child(1) > div:nth-child(2) > img {
  width: 63rpx;
  height: 63rpx;
  border-radius: 50%;
}
.basedataFriends_list > div > div:nth-child(2) {
  font-size: 24rpx;
  font-weight: bold;
  color: rgba(102, 102, 102, 1);
}
.basedataFriends_list > div > div:nth-child(2) > input {
  width: 400rpx;
  text-align: right;
  color: #333;
}
.basedataFriends_list > div:nth-child(3) {
  position: relative;
}
.basedataFriends_list > div:nth-child(3) > span {
  font-size: 22rpx;
  font-weight: bold;
  color: rgba(153, 153, 153, 1);
  position: absolute;
  bottom: -35rpx;
  right: 10rpx;
}
.basedataFriends_list > div:nth-child(4) {
  background: none;
  border-bottom: none;
  height: 70rpx;
}
.basedataFriends_list > .picker_die {
  background: none;
}
.basedataFriends_list > .picker_die > div {
  font-size: 26rpx;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  width: 30%;
  border-bottom: 1rpx solid #dddddd;
  height: 60rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.basedataFriends_list > .picker_die > div > div {
  width: 165rpx;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  overflow: hidden;
}
.picker {
  width: 165rpx;
  font-size: 26rpx;
  font-weight: 400;
  color: #333;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  overflow: hidden;
}
.basedataFriends_list > .picker_die > div > img {
  width: 22rpx;
  height: 12rpx;
}
.basedataFriends_meng {
  width: 100%;
  background: rgba(3, 3, 3, 0.4);
  position: absolute;
  left: 0;
  top: 0;
}
.basedataFriends_qianm {
  width: 618rpx;
  height: 322rpx;
  padding: 30rpx 100rpx 0 100rpx;
  background: #fff;
  box-sizing: border-box;
  position: absolute;
  left: 66rpx;
  top: 400rpx;
  border-radius: 10rpx;
}
.basedataFriends_qianm > div:nth-child(1) {
  font-size: 30rpx;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
  text-align: center;
  /* margin-top: 5rpx; */
}
.basedataFriends_qianm > div:nth-child(2) > input {
  font-size: 24rpx;
  font-weight: bold;
  color: rgba(102, 102, 102, 1);
}
.basedataFriends_qianm > div:nth-child(2) {
  margin-top: 30rpx;
}
.basedataFriends_qianm > div:nth-child(3) {
  font-size: 22rpx;
  font-weight: bold;
  color: rgba(153, 153, 153, 1);
}
.basedataFriends_qianm > div:nth-child(4) {
  display: flex;
  justify-content: space-between;
  margin-top: 50rpx;
}
.basedataFriends_qianm > div:nth-child(4) > span {
  display: inline-block;
  width: 50%;
  text-align: center;
  height: 50rpx;
  line-height: 50rpx;
}
.last_true {
  width: 685rpx;
  height: 98rpx;
  line-height: 98rpx;
  text-align: center;
  margin: 0 auto;
  background: url("http://www.zhaoshengku.net/wx-%E5%9C%86%E8%A7%92%E7%9F%A9%E5%BD%A2%20%281%29.png")
    no-repeat;
  background-size: 100% 100%;
  background-position: center center;
  margin-top: 150rpx;
}
.basedataFriends_list > .biaoqian_div {
  height: 200rpx;
  justify-content: flex-start;
  align-items: flex-start;
  background: none;
}
.basedataFriends_list .biaoqian_div > div {
  margin-right: 30rpx;
  height: 100rpx;
  line-height: 100rpx;
  width: 100rpx;
}
.basedataFriends_list .biaoqian_div > ul > li {
  display: flex;
  height: 80rpx;
  align-items: center;
  border-bottom: 1px solid #eee;
  width: 530rpx;
}
.basedataFriends_list .biaoqian_div > ul > li:nth-child(1) {
  border: none;
}
.basedataFriends_list .biaoqian_div > ul > li:nth-child(1) span {
  font-size: 30rpx;
  font-weight: 500;
  color: rgba(34, 151, 212, 1);
}
.basedataFriends_list .biaoqian_div > ul > li:nth-child(1) input {
  font-size: 24rpx;
  font-weight: 400;
  color: #333;
  border-bottom: 1px solid #ddddddff;
  padding-left: 10rpx;
}
.basedataFriends_list .biaoqian_div > ul > li:nth-child(2) span {
  display: inline-block;
  width: 166rpx;
  height: 44rpx;
  text-align: center;
  line-height: 44rpx;
  font-size: 24rpx;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  margin-right: 10rpx;
}
.basedataFriends_list .biaoqian_div > ul > li:nth-child(2) span img {
  width: 20rpx;
  height: 20rpx;
  margin-left: 5rpx;
  margin-right: -3rpx;
}
.basedataFriends_list > .qq {
  background: none;
}
.basedataFriends_list > .wx {
  background: none;
}
.basedataFriends_list > .qq > div:nth-child(2) > input {
  text-align: left;
}
.basedataFriends_list > .qq > div:nth-child(2) {
  flex: 1;
}
.basedataFriends_list > .qq > div:nth-child(1) {
  margin-right: 20rpx;
  width: 100rpx;
}
.basedataFriends_list > .wx > div:nth-child(2) > input {
  text-align: left;
}
.basedataFriends_list > .wx > div:nth-child(2) {
  flex: 1;
}
.basedataFriends_list > .wx > div:nth-child(1) {
  margin-right: 20rpx;
  width: 100rpx;
}
.placeholder {
  color: #999;
}
input {
  color: #333;
}
</style>
